<template>
  <div class="flex h-full" style="padding: 10px">
    <el-card class="aside">
      <SmartRobotListGrid @onActive="onActive" />
    </el-card>
    <div class="main h-full" style="flex: 1">
      <el-scrollbar class="w-full h-full">
        <component :is="currentComponent" @toSetting="toSetting" />
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useStore } from "vuex";
import SmartRobotListGrid from "./SmartRobotListGrid";
import RobotSettings from "./comp/robotSettings";
import ProblemStatistics from "./comp/problemStatistics";
import EnterpriseKnowledge from "./comp/enterpriseKnowledge";
import ConversationStatistics from "./comp/conversationStatistics";

const store = useStore();
const active = ref("0");

const componentsMap = {
  0: RobotSettings,
  1: ProblemStatistics,
  2: EnterpriseKnowledge,
  3: ConversationStatistics,
};

const currentComponent = computed(() => {
  return componentsMap[active.value];
});

const onActive = (val) => {
  active.value = val;
  console.log(val);
};

const init = async () => {
  // 初始化代码
};

const toSetting = () => {
  onActive(1);
};

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.aside {
  min-width: 180px;
  height: 100%;
}
.main {
  flex: 1;
}
</style>
